import React from 'react';
import { Table, Row, Col, Form, Input, Icon, InputNumber, Radio, DatePicker, Select, Upload, Button, Switch, Modal, Popconfirm, Tabs, message } from 'antd';
import BizParams from '../../components/commons/BizParams'
import CurrencySelect from '../../components/commons/CurrencySelect'
import OperatorConstant from "../../utils/OperatorConstant";

const R = require('ramda');
import moment from 'moment'
const TabPane = Tabs.TabPane;
const FormItem = Form.Item;
const dateFormat = 'YYYY-MM-DD';
const view = "view"

export default Form.create({ wrappedComponentRef: true })(class Inoviceheader extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            open: false,
            disabled: true,
            type: ""
        }
    }

    handleCancel = () => {
        this.handleResetFields();
    }

    handleResetFields = () => {
        this.props.dispatch({
            type: "recinvoices/setInoviceproductsList",
            payload: {
                inoviceheader: []
            }
        });
    }


    // columns = [
    //     {title: '序号', dataIndex: 'id', key: 'id',},
    //     {title: '税局HSCode', dataIndex: 'producthscode', key: 'producthscode',},
    //     {title: '品名', dataIndex: 'productname', key: 'productname'},
    //     {title: '品牌', dataIndex: 'productbranch', key: 'productbranch',},
    //     {title: '规格型号', key: 'productmodel', dataIndex: 'productmodel'},
    //     {title: '发票备注', key: 'invoiceremark', dataIndex: 'invoiceremark'},
    //     {title: '数量', dataIndex: 'productnumber', key: 'productnumber',},
    //     {title: '单位', dataIndex: 'productunit', key: 'productunit',},
    //     {title: '报关单价', dataIndex: 'declarePrice', key: 'declarePrice',},
    //     {title: '含税单价', dataIndex: 'productprice', key: 'productprice'},
    //     {title: '含税金额', dataIndex: 'totalprice', key: 'totalprice',},
    //     {title: '金额', dataIndex: 'amt', key: 'amt',},
    //     {title: '退税率', dataIndex: 'taxrate', key: 'taxrate'},
    //     {title: '换汇成本', dataIndex: 'exchangecost', key: 'exchangecost',},
    //     {title: '开票人', dataIndex: 'drawername', key: 'drawername'}
    // ];

    invoiceColumns = [
        { title: '序号', dataIndex: 'id', key: 'id', },
        { title: '税局HSCode', dataIndex: 'producthscode', key: 'producthscode', },
        { title: '品名', dataIndex: 'productname', key: 'productname' },
        { title: '品牌', dataIndex: 'productbranch', key: 'productbranch', },
        { title: '规格', dataIndex: 'size', key: 'size', },
        {
            title: '型号', key: 'productmodel', render: (text, record, index) => {
                if (!R.isNil(this.props.openinvoicestatus) && (this.props.openinvoicestatus == "1" || this.props.openinvoicestatus == "2")) {
                    return (
                        <Input onChange={(values) => {
                            record.productmodel = values.target.value;
                        }} defaultValue={record.productmodel} style={{ width: 100 }} disabled={this.props.disabled} maxLength="200"/>
                    );
                } else {
                    return (
                        record.productmodel
                    );
                }

            }
        },
        {
            title: '发票备注', key: 'invoiceremark', render: (text, record, index) => {
                if (!R.isNil(this.props.openinvoicestatus) && (this.props.openinvoicestatus == "1" || this.props.openinvoicestatus == "2")) {
                    return (
                        <Input onChange={(values) => {
                            record.invoiceremark = values.target.value;
                        }} defaultValue={record.invoiceremark} style={{ width: 100 }} disabled={this.props.disabled} maxLength="255"/>
                    );
                } else {
                    return (
                        record.invoiceremark
                    );
                }

            }
        },
        {
            title: '增值税率(%)', dataIndex: 'zzrate', key: 'zzrate', render: (text, record) => {
                if (this.props.openinvoicestatus == "1" || this.props.openinvoicestatus == "2") {
                    return (
                        <InputNumber onChange={(value) => {
                            record.zzrate = value;
                        }} defaultValue={record.zzrate} disabled={this.props.disabled} min={0.01} max={100} precision={2}/>
                    );
                } else {
                    return (
                        record.zzrate
                    );
                }

            }
        },
        {
            title: '退税率(%)', dataIndex: 'taxrate', key: 'taxrate', render: (text, record) => {
                if (this.props.openinvoicestatus == "1" || this.props.openinvoicestatus == "2") {
                    return (
                        <InputNumber onChange={(value) => {
                            record.taxrate = value;
                        }} defaultValue={record.taxrate} disabled={this.props.disabled} min={0.01} max={100} precision={2}/>
                    );
                } else {
                    return (
                        record.taxrate
                    );
                }

            }
        },
        { title: '数量', dataIndex: 'productnumber', key: 'productnumber', },
        { title: '单位', dataIndex: 'productunit', key: 'productunit', },
        { title: '报关单价', dataIndex: 'declarePrice', key: 'declarePrice', },
        { title: '含税单价', dataIndex: 'productprice', key: 'productprice' },
        { title: '含税金额', dataIndex: 'totalprice', key: 'totalprice', },
        { title: '金额', dataIndex: 'amt', key: 'amt', },
        { title: '税额', dataIndex: 'tax', key: 'tax' },
        { title: '换汇成本', dataIndex: 'exchangecost', key: 'exchangecost', },
        { title: '开票人', dataIndex: 'drawername', key: 'drawername' }
    ];


    render() {
        let dataSource = R.isNil(this.props.dataSource) ? [] : this.props.dataSource;

        return (
            <Tabs>
                <TabPane tab="产品" key="2">
                    <Row>
                        <Col>
                            <div>
                                <Table rowKey={record => record.id} dataSource={dataSource} columns={this.invoiceColumns} bordered={true} size={'middle'} scroll={{ x: true }} />
                            </div>
                        </Col>
                    </Row>
                </TabPane>
            </Tabs>
        );
    }
})


